import { Col, Row, Switch } from 'antd'
import React, { useContext } from 'react'
import styles from './index.less'
import { ProFormText } from '@ant-design/pro-form';
import { InputValue } from '../../SettingModal';
import { getWarnUpdate } from '@/services/warning';
import { history } from 'umi';
import { useState } from 'react';
interface FormItemProps {
  name: string,
  nextname: string,
  index: string,
  index1?: string,
  index2?: string,
  value?: string,
  value1?: string,
  isEnable?: string,
  val?: string,
  iId?: string
}
export default function FormItem(props: FormItemProps) {
  const ctx1 = useContext(InputValue);
  const { id: id1 } = history.location.query ?? {}
  const { name, nextname, index, index2, index1, value, value1, val, isEnable, iId } = props;
  const [va, setValue] = useState<number>(Number(value))
  const [va1, setValue1] = useState<number>()
  const [va2, setValue2] = useState<number>()
  const onChange1 = async (checked: any) => {
    await getWarnUpdate({ activityId: id1, id: iId, isEnable: checked == true ? "1" : '2' });

  }
  const handle = (e: any, id?: string, key?: string,) => {
    // let count = 0;
    // if (e?.target.value <= 100) {
    //   count = e?.target.value
    // } else if (e?.target.value > 100) {
    //   count = 100;
    // } else {
    const count = e?.target.value.replace(/[^\d.]/g, '')
    // }
    ctx1.changeValue(id, key, count)

    return count
  }
  const handle1 = (e: any, id?: string, key?: string,) => {
    const count = e?.target.value.replace(/[^\d.]/g, '')
    ctx1.changeValue(id, key, count)
    return count
  }

  const onChange = (e: any, id?: string, key?: string, type?: number) => {

    if (type == 1) {
      setValue(handle(e, id, key))
    } else if (type == 2) {
      setValue1(handle(e, id, key))
    } else {
      setValue2(handle1(e, id, key))
    }
  }

  // 校验

  return (
    <Row className={styles.form_wrap} style={{ flexWrap: "nowrap" }}>
      <Col span={10} className={styles.border_style}>
        <div className={styles.form_item}>
          <div style={{ display: 'flex', justifyContent: 'flex-end' }}>{name}</div>

          <ProFormText
            rules={[
              {
                validator: async (_, val) => {
                  val = val.replace(/[^\d.]/g, '')

                  if (val < 1 || val > 100) {
                    return Promise.reject(new Error('请输入1-100之间的正整数'));
                  } else if (!(/(^[1-9]\d*$)/.test(val))) {
                    return Promise.reject(new Error('请输入1-100之间的正整数'));
                  } else {
                    return;
                  }
                }
              }
            ]}
            name={index}
            fieldProps={{
              onChange: (e) => onChange(e, index, "value", 1),
              maxLength: 3,
              value: va
            }} initialValue={value} />
          <div>%预警</div>
        </div>
      </Col>
      <Col span={10} className={styles.border_style}>
        {
          nextname !== '' ? <div className={styles.form_item}>
            <ProFormText
              rules={[
                {
                  validator: async (_, val) => {
                    val = val.replace(/[^\d.]/g, '')
                    if (val < 1 || val > 30) {
                      return Promise.reject(new Error('请输入1-30之间的正整数'));
                    } else if (!(/(^[1-9]\d*$)/.test(val))) {
                      return Promise.reject(new Error('请输入1-30之间的正整数'));
                    } else {
                      return;
                    }
                  }
                }
              ]}
              name={index1} fieldProps={{ onChange: (e) => onChange(e, index1, "timeLimit", 3), value: va2, maxLength: 3 }} initialValue={val} />
            <span>{nextname}</span>
            <ProFormText rules={[
              {
                validator: async (_, val) => {
                  val = val.replace(/[^\d.]/g, '')
                  if (val < 1 || val > 100) {
                    return Promise.reject(new Error('请输入1-100之间的正整数'));
                  } else if (!(/(^[1-9]\d*$)/.test(val))) {
                    return Promise.reject(new Error('请输入1-100之间的正整数'));
                  } else if (Number(val) < Number(va)) {
                    return Promise.reject(new Error('完成规则不能低于预警规则'));
                  } else {
                    return;
                  }
                }
              }
            ]} name={index2} fieldProps={{
              onChange: (e) => onChange(e, index1, "value", 2), maxLength: 3,
              value: va1
            }} initialValue={value1} />
            <span>%完成</span>
          </div> : null
        }
      </Col>
      <Col span={4} style={{ textAlign: 'center' }} className={styles.border_style}>
        <Switch defaultChecked={isEnable == "1" ? true : false} onChange={onChange1} />

      </Col>
    </Row>
  )
}
